<template>
    <div class="collectDetail page">
        <formHeader :title="'收款明细'" wColor></formHeader>
        <div class="con" >
            <div class="top">
                <div class="user">
                    <div class="userImg">
                        <img :src="this.avatar" alt="">
                    </div>
                    <div class="desc">收款-来自{{this.name}}进货</div>
                    <div class="cost">{{bus!=4&&bus!=6?'+':'-'}}{{this.amount}}</div>
                </div>
            </div>
            <div class="list">
                <div class="goods" v-for="item in items" :key="item.id">
                    <div class="goodCell">
                        <div class="goodImg">
                            <img :src="imgH+item.img" alt="">
                        </div>
                        <div class="desc">
                            <div class="goodName">
                                {{item.name}}
                            </div>
                            <div class="goodModel">{{item.skuName?item.skuName:'默认'}}</div>
                            <div class="bot">
                                <span class="money">￥{{item.price.toFixed(2)}}</span>
                                <span class="count">X{{item.quantity}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="word" v-if="isCollect!=0">
                    <div class="wordItem">
                        <span class="title">代收款</span>
                        <span class="num">￥{{this.amount?this.amount.toFixed(2):0.00}}</span>
                    </div>
                    <div class="wordItem" v-if="this.bus==2">
                        <span class="title">自动进货扣除</span>
                        <span class="num">￥{{this.deMoney?this.deMoney.toFixed(2):0.00}}</span>
                    </div>
                    <div class="total" v-if="this.bus==2">
                        <span class="title">实收金额</span>
                        <span class="num">￥{{(this.amount-this.deMoney)?(this.amount-this.deMoney).toFixed(2):0.00}}</span>
                    </div>
                    <div class="total" v-if="this.bus!=2">
                        <span class="title">实收金额</span>
                        <span class="num">￥{{this.amount?this.amount.toFixed(2):0.00}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getOrder,recursionOrder} from '@/api/order'
    import formHeader from '@/components/form-header'
    import {confirm} from "@/api/account";
    import {showError} from '@/toast'
    export default {
        name : "collectDetail",
        components:{formHeader},
        data(){
            return{
                items: [],
                isCollect:'',
                avatar:'',
                name:'',
                info:'',
                state:'',
                amount:'',
                id:'',
                bus:'',
                deMoney:''
            }
        },
        activated(){
            this.info=this.$route.query.info
            this.amount=this.$route.query.amount
            this.bus=this.$route.query.bus
            this.items=[]
            this.getOrder()
        },
        computed:{
            imgH(){
                return process.env.VUE_APP_IMG_DOMAIN
            }
        },
        methods:{
            getOrder(){
                getOrder(null,this.info,1).then(res=>{
                    this.items = res.data.mallOrder.items
                    this.name = res.data.user.name
                    this.avatar = res.data.user.avatar
                })
                recursionOrder(this.info).then(res=>{
                    this.deMoney = res.data?res.data:0
                })
            },
        }
    }
</script>

<style scoped lang="stylus">
.collectDetail
    background-color $page-bg
    .con
        margin-top 47px
        padding-bottom 52px
        .top
            margin-bottom 10px
            background-color #fff
            .user
                height 193px
                margin 0 28px
                color #333
                display flex
                flex-direction column
                justify-content center
                align-items center
                img
                    width 40px
                    height 40px
                .desc
                    font-size 16px
                    margin-top 9px
                    margin-bottom 19px
                .cost
                    font-size 28px
                    font-family DIN
                    font-weight bold
        .list
            background-color #fff
        .goods
            padding 0 15px 15px 15px
            .goodCell
                padding-top 15px
                display flex
                border-bottom 1px solid #eee
                img
                    width  75px
                    height 75px
                .desc
                    flex 1
                    margin-left 11px
                    .goodName
                        color #333
                        font-size 13px
                        white-space nowrap
                        overflow hidden
                        text-overflow  ellipsis
                    .goodModel
                        color #999
                        font-size 11px
                        margin-top 9px
                        margin-bottom 14px
                    .bot
                        display flex
                        justify-content space-between
                        font-size 16px
                        color #E43A60
                        .money
                            font-weight bold
                        .count
                            color #333
        .word
            margin-top 21px
            padding 10px 15px 15px 15px
            /*margin-bottom 15px*/
            .wordItem
                color #666
                font-size 13px
                display flex
                justify-content space-between
                margin-bottom 5px
            .total
                font-size 15px
                color #333
                display flex
                justify-content space-between
                padding-top 15px
                .num
                    color #E43A60
    .getMoney
        position fixed
        bottom 0
        z-index 999
        img
            width 375px
            height 49px
</style>